<template>
  <div class="service_contract">
    <!-- <div class="flex top">
      <div class="flex-1">
        <img
          class="w-100 h-100"
          src="../../assets/images/risk.jpg"
          alt="征信系统"
        >
      </div>
      <div class="right">
        <p class="flex flex-between align-center">
          <span style="font-size: 20px">征信账户</span>
          <span class="blue-font pointer" @click="checkRecords">购买记录</span>
        </p>
        <p class="flex flex-between align-center" style="margin: 15px 0 10px">
          <span class="color-666">征信余量</span>
          <span class="color-666">{{ risk_credit_amount }}次</span>
        </p>
        <el-button
          class="w-100"
          type="primary"
          style="font-size: 18px"
          @click="toBuy"
        >去购买</el-button>
        <el-divider />
        <p class="flex flex-between align-center">
          <span
            class="color-666"
          >自动充值（{{
            risk_credit_automatic == 1 ? "已开启" : "未开启"
          }}）</span>
          <span class="blue-font pointer" @click="autoRecharge">{{
            risk_credit_automatic == 1 ? "关闭" : "开启"
          }}</span>
        </p>
        <el-tag
          class="w-100 text-center"
          type="warning"
        >开启自动充值避免风控次数不足</el-tag>
      </div>
    </div> -->
    <h5 class="record_header">征信记录</h5>
    <div class="common_form_search">
      <el-form ref="searchForm" :inline="true" :model="searchForm">
        <el-form-item label="订单编号">
          <el-input
            v-model="searchForm.trade_no"
            style="width: 230px"
            placeholder="请输入订单编号"
            clearable
          />
        </el-form-item>
        <el-form-item label="用户姓名">
          <el-input
            v-model="searchForm.name"
            placeholder="请输入用户姓名"
            clearable
          />
        </el-form-item>
        <!-- <el-form-item label="手机号">
          <el-input
            v-model="searchForm.user_mobile"
            placeholder="请输入手机号"
            clearable
          />
        </el-form-item> -->
        <el-form-item label="查询时间">
          <my-date-picker ref="myDatePicker" />
        </el-form-item>
        <el-form-item>
          <el-button
            size="small"
            type="primary"
            @click="search()"
          >查询</el-button>
          <el-button size="small" @click="reset()">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table :data="tableData" border>
      <el-table-column align="center" width="80" prop="id" label="ID" />
      <el-table-column align="center" width="190" label="订单编号">
        <template slot-scope="scope">
          <span
            class="blue-font pointer"
            @click="goToOrder(scope.row.trade_no)"
          >{{ scope.row.trade_no }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="name" label="用户名" />
      <el-table-column align="center" prop="card_id" label="用户身份证号" />
      <!-- <el-table-column align="center" prop="user_mobile" label="用户手机号" /> -->
      <el-table-column align="center" prop="data_pdf_url" label="风控详情">
        <template slot-scope="scope">
          <span
            class="blue-font pointer"
            @click="checkUrl(scope.row)"
          >查看报告</span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="create_time" label="查询时间" />
    </el-table>
    <custom-page
      ref="customPage"
      :total="total"
      @getList="getList"
    />
    <!-- <buy-dialog
      ref="buyDialog"
      dialog-title="风控次数购买"
      :type="3"
      @getList="getList"
    /> -->
    <!-- <recharge-dialog
      ref="rechargeDialog"
      dialog-title="风控自动充值"
      :type="3"
      @getList="getList"
    /> -->
    <!-- <chechUrl-dialog
      ref="chechUrlDialog"
      :select-row="selectRow"
      @getList="getList"
    /> -->
  </div>
</template>

<script>
import {
  // getShopRiskCreditList,
  // getShopRiskCreditStuatus,
  // riskCreditAutoRecharge,

  rickWongList
} from '@/api/data'
import customPage from '@/components/customPage'
import myDatePicker from '@/components/myDatePicker'
// import buyDialog from './components/buy'
// import rechargeDialog from './components/recharge'
// import chechUrlDialog from './components/chechUrl'
export default {
  components: { customPage, myDatePicker },
  data() {
    return {
      tableData: [],
      total: 0,
      searchForm: {
        // order_id: '',
        name: '',
        // user_mobile: '',
        create_time: ''
      },
      risk_credit_automatic: 0,
      risk_credit_amount: 0,
      disabled: false,
      selectRow: null
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    checkUrl(row) {
      // this.selectRow = row
      // this.$refs.chechUrlDialog.dialogVisible = true
      if (row.data_pdf_url) {
        if(row.local_url==null){
          window.open(row.data_pdf_url)
        }else{
          let local_url = '';
          local_url  = '/pro-api/storage/rick/'+row.local_url;
          window.open(local_url)
        }
      } else {
        this.$message.warning('未生成报告')
        return
      }

    },
    // 自动充值
    // autoRecharge() {
    //   if (!this.showTip()) {
    //     return
    //   }
    //   if (this.risk_credit_automatic == 1) {
    //     // 关闭
    //     this.$confirm('确认要关闭自动充值吗?', '关闭自动充值', {
    //       confirmButtonText: '确定',
    //       cancelButtonText: '取消'
    //     })
    //       .then(() => {
    //         riskCreditAutoRecharge().then((res) => {
    //           this.getList()
    //         })
    //       })
    //       .catch(() => {})
    //   } else {
    //     // 开启
    //     this.$refs.rechargeDialog.dialogVisible = true
    //   }
    // },
    // 去购买
    // toBuy() {
    //   if (!this.showTip()) {
    //     return
    //   }
    //   this.$refs.buyDialog.dialogVisible = true
    // },
    // 查看合同购买记录
    checkRecords() {
      if (!this.showTip()) {
        return
      }
      this.$router.push({ name: 'serviceRiskRecord' })
    },
    // 查询
    search() {
      if (!this.showTip()) {
        return
      }
      const pickerVal = this.$refs.myDatePicker.getVal()
      if (pickerVal !== 'error') {
        this.searchForm.create_time = pickerVal
        this.$refs.customPage.page = 1
        this.getList()
      }
    },
    // 重置
    reset() {
      if (!this.showTip()) {
        return
      }
      if (this.$refs.myDatePicker) {
        this.$refs.myDatePicker.reset()
      }
      this.searchForm = {
        // order_id: '',
        name: '',
        // user_mobile: '',
        create_time: ''
      }
      this.getList()
    },
    // 获取数据
    getList() {
      const { page, pageSize } = this.$refs.customPage
      rickWongList({
        page,
        pageSize,
        ...this.searchForm
      }).then((res) => {
        this.tableData = res.data || []
        this.total = res.total || 0
        // this.risk_credit_automatic = risk_credit_automatic
        // this.risk_credit_amount = risk_credit_amount
      })
    },
    goToOrder(orderId) {
      if (orderId) {
        this.$router.push({ name: 'orderList', params: { orderId }})
      }
    },
    // getData() {
    //   getShopRiskCreditStuatus()
    //     .then((res) => {
    //       this.disabled = false
    //       this.getList()
    //     })
    //     .catch((err) => {
    //     //   this.disabled = true;
    //     })
    // },
    showTip() {
      if (this.disabled) {
        this.$message({
          message: '该店铺暂未开启百融风控, 请先开启后再查看该功能',
          type: 'error'
        })
        return false
      }
      return true
    }
  }
}
</script>

<style lang="scss" scoped>
.top {
  height: 300px;
  .el-divider--horizontal {
    margin: 20px 0;
  }
}
.right {
  width: 345px;
  margin-left: 20px;
  padding: 20px;
  border: 1px solid #e6e6e6;
  p {
    line-height: 32px;
  }
  span {
    font-size: 16px;
  }
  .el-tag {
    color: #ff8500;
    margin-top: 10px;
    font-size: 14px;
  }
}
.record_header {
  padding-left: 15px;
  border-left: 3px solid $mainBlue;
  margin: 20px 0;
}
</style>
